<?
  require_once('../db.php');
  require_once('../util/geometry_to_array.php');
  db_connect();

  $county = htmlspecialchars($_GET["c"]);

  $query = 'SELECT name_CNT AS name, code_CNT AS code, AsText(center_CNT) AS center FROM ldi_county_cnt';
  $query .= " WHERE code_CNT='".mysql_real_escape_string($county)."'";
  $result = mysql_query($query) or die("ERROR PERFORMING QUERY '".$query."': ".mysql_error());

  if (!($row = mysql_fetch_assoc($result)))
    die("Invalid county specified");

  // parse point
  $p = geometry_to_array($row["center"]);
  $cx = $p[0];
  $cy = $p[1];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=false;" />
<title>LDIR trasee</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../const.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../array.js"></script>
<script type="text/javascript" src="../maptypes.js"></script>
<script type="text/javascript" src="../misc.drag.js"></script>
<script type="text/javascript" src="../misc.util.js"></script>
<script type="text/javascript" src="../util/polycluster.js"></script>
<script type="text/javascript" src="../util/polypack.js"></script>

<script type="text/javascript">

var map;
var cluster;
var infoWindow;

var options = {
  version: 1,
  map: {
    gps: false,
    type: 0,
    zoom: 9,
    lat: <?=$cy?>,
    lng: <?=$cx?>
  }
};

var poly_colors = {};
var POLY_COLOR = "#901ad4";

var oldw = 0;
var oldh = 0;

var MAP_TYPE_IDS = [ 'mtMapMaker', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];

//############
function resizeHandler() {
  // get height and width
  winH = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetHeight : window.innerHeight;
  winW = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetWidth : window.innerWidth;
  var mc = document.getElementById('map_canvas');
  // mc.style.width = (winW - 204) + "px";
  mc.style.width = winW + "px";
  mc.style.height = winH + "px";

  var oldCenter;
  if (oldw != 0 && oldh != 0)
    oldCenter = map.getCenter();

  // map object
  google.maps.event.trigger(map, 'resize');
  // moveHandler();

  oldw = winW;
  oldh = winH;
  if (oldCenter)
    map.setCenter(oldCenter);
}

//############

function loadPolyCluster() {
  cluster.load(county_polygons);
  for (var p in county_polygons)
    setPolyColor(p, POLY_COLOR);
}

//############

function addPolyLines() {
  for (var i=0; i<zone_lines.length; i++) {
    var col = zone_lines[i].color;
    var pol = zone_lines[i].poly;
    if (pol.length == 0)
      continue;
    var pp;
    if (pol[0].x)
      pp = [pol];
    else
      pp = pol;
    for (var j=0; j<pp.length; j++) {
      var ll = [];
      for (var k=0; k<pp[j].length; k++)
        ll.push(new google.maps.LatLng(pp[j][k].y, pp[j][k].x));
      var pl = new google.maps.Polyline({map: map, path: ll, strokeColor: col, strokeOpacity: 1.0, strokeWeight: 2});
      pl.name = zone_lines[i].name;
      google.maps.event.addListener(pl, 'click', function(ev) {
        try {
          var content = '<div><p>' + this.name + '</p></div>';
          infoWindow.close();
          infoWindow.setContent(content);
          infoWindow.setPosition(ev.latLng);
          infoWindow.open(map);
        }
        catch(err) {
          if (Const.logging) console.log("ERROR -- polyLineClicked -- " + err);
        }
      });
    }
  }

  map.setCenter(new google.maps.LatLng(options.map.lat, options.map.lng));
}

//############

function setPolyColor(poly, color) {
  cluster.setColor(poly, {fill: 0, stroke: 1, fillColor: color, strokeColor: color, fillAlpha: 0, strokeAlpha: 1, weight: 2});
}

//############

function loadJS() {

  // load polycluster
  cluster = new PolyCluster();
  cluster.setMap(map);
  google.maps.event.addListener(map, "idle", function() { cluster.repair(); });

  // insert polycluster into DOM
  var pcscr = document.getElementById("pcscr");
  if (pcscr) document.body.removeChild(pcscr);
  pcscr = document.createElement("SCRIPT");
  if (pcscr) document.body.appendChild(pcscr);
  pcscr.src = 'onecounty.js.php?c=<?=$county?>';
  pcscr.id = 'pcscr';
}

//############

function initialize() {
  DragFix.enableWorkaround();

  // map initialization

  map = new google.maps.Map(
    document.getElementById("map_canvas"),
    {
      zoom: options.map.zoom,
      center: new google.maps.LatLng(options.map.lat, options.map.lng),
      mapTypeId: MAP_TYPE_IDS[options.map.type],
      navigationControl: false,
      mapTypeControl: true,
      mapTypeControlOptions: {
        mapTypeIds: MAP_TYPE_IDS,
        style: google.maps.MapTypeControlStyle.DEFAULT
      },
      scaleControl: true,
      scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
      }
    }
  );

  map.mapTypes.set('mtMapMaker', mtMapMaker);

  // events
  if (window.attachEvent)
    window.attachEvent("onresize", resizeHandler);
  else
    window.addEventListener("resize", resizeHandler, false);

  map.setMapTypeId('mtMapMaker');

  infoWindow = new google.maps.InfoWindow({ content: '' });

  setTimeout('loadJS()', 100);

  resizeHandler();
}

//############

function zoomIn() {
  map.setZoom(map.getZoom()+1);
}

//############

function zoomOut() {
  map.setZoom(map.getZoom()-1);
}

</script>
</head>

<body onload="initialize()">
<div id="wrap_main">
  <div id="map_canvas"></div>
  <div id="msg_div1">
    <p>&nbsp;Trasee <?=$row["name"]?>&nbsp;</p>
  </div>
  <div id="legend_div">
    <p>Legenda trasee:</p>
    <p><span style="color:#d41a1f">&#x2588; - neasignat</span></p>
    <p><span style="color:#7f83ff">&#x2588; - asignat neverificat</span></p>
    <p><span style="color:#20d419">&#x2588; - terminat si verificat</span></p>
  </div>
  <div id="zoomin_div">
    <a class="dragfix" href="javascript:zoomIn()"><img src="icons/btn-zoomin.png" alt="Zoom In" /></a>
  </div>
  <div id="zoomout_div">
    <a class="dragfix" href="javascript:zoomOut()"><img src="icons/btn-zoomout.png" alt="Zoom Out" /></a>
  </div>
</div>
</body>
</html>
